@success-color: #4caf50;
@error-color: #f44336;
@warning-color: #fb0;
@info-color: #1c97f3;

.mdNotification {
  width: 440px;
  min-height: 93px;
  border-top: 4px solid #2196f3;
  padding: 14px 20px 20px 14px;
  border-radius: 6px;
  &.error {
    border-top-color: @error-color;
  }
  &.success {
    border-top-color: @success-color;
  }
  &.warning {
    border-top-color: @warning-color;
  }
  &.info {
    border-top-color: @info-color;
  }
  &.closable .ant-notification-notice-close {
    display: none;
  }
  .ant-notification-notice-icon {
    margin-left: 0px;
    font-size: 24px;
    .success {
      color: @success-color;
    }
    .error {
      color: @error-color;
    }
    .warning {
      color: @warning-color;
    }
    .info {
      color: @info-color;
    }
  }
  .ant-notification-notice-message {
    font-weight: 500;
    margin-left: 34px;
    margin-bottom: 8px;
    font-size: 16px;
    color: #333;
  }
  .ant-notification-notice-description {
    font-size: 13px;
    color: #757575;
    .antNotificationDescription {
      word-break: break-all;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      max-height: 62px; // 最多显示 3行 不支持webkit-line-clamp时 托底逻辑
      -webkit-line-clamp: 3;
      /*! autoprefixer: off */
      -webkit-box-orient: vertical;
      /* autoprefixer: on */
    }
  }
  .ant-notification-notice-description {
    margin-left: 34px;
    font-size: 13px;
    color: #333;
  }
  .ant-notification-notice-btn {
    margin-top: 8px;
  }
  .ant-notification-notice-close {
    font-size: 20px;
    right: 10px;
    top: 0px;
    color: #9e9e9e;
  }
}

.notificationIconWrap {
  animation: rotate 3s ease-in-out infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
